<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>lazyload</title>
</head>
<body>
<p>请往下翻</p>
<!-- 占位元素 -->
<ul style="height: 1024px"></ul>
<!-- 需要lazyload的图片 -->
<img class="lazyload" data-lazy="https://img10.360buyimg.com/n4/g7/M03/08/0D/rBEHZlBzwZwIAAAAAAI4sOvIiLkAABpMQDf8E4AAjjI749.jpg" width="100" height="100" />

<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
var itemSize = null;
var lazyFn = function(){
	//lazyload的元素
	var item = $(".lazyload");

	$.each(item, function(){
		var _this = $(this);
		var top = _this[0].offsetTop;
		itemSize = item.size();
		var scrollHeight = $(document).scrollTop();
		var docHeight = scrollHeight + (document.compatMode == "BackCompat" ? document.body : document.documentElement).clientHeight;
		if( itemSize > 0 && ( top > scrollHeight-_this.outerHeight() ) && top < docHeight){
			//DO：处理图片src路径
			_this.attr("src", _this.attr("data-lazy"));
			// _this.attr("data-lazy","");
			itemSize -= 1;

			//TODO：可以处理异步加载JS/CSS文件
			//TODO：可以处理执行JS中的函数
		}

		//无lazyload元素就解绑
		if (!itemSize){
			$(window).unbind('scroll',throttled);
		}
	})
}

var lazyTimer = setTimeout(lazyFn, 0);
//节流函数
var throttled = function(){
    if(lazyTimer){
        clearTimeout(lazyTimer);
    }
    lazyTimer = setTimeout(lazyFn, 100);
}

//绑定事件
$(window).bind('scroll', throttled);
</script>

</body>
</html>